<template>
  <div  style="background: linear-gradient(135deg, #a1c4fd, #c2e9fb);;height: 750px;" >
    <div id="nav" style="width: 100%;height: 100%">

      <vue-particles
          color="#555"
          :particleOpacity="0.7"
          :particlesNumber="150"
          shapeType="circle"
          :particleSize="4"
          linesColor="#555"
          :linesWidth="1"
          :lineLinked="true"
          :lineOpacity="0.4"
          :linesDistance="150"
          :moveSpeed="2"
          :hoverEffect="true"
          hoverMode="grab"
          :clickEffect="false"
          clickMode="push"
          class="lizi"
      />
    </div>
    <div class="loginDiv">
      <div class="login-content">
        <h1 class="login-title">用户登录</h1>
        <el-form :model="loginForm" label-width="100px"
                 :rules="rules" ref="loginForm">
          <el-form-item label="名字" prop="name">
            <el-input style="width: 200px" type="text" v-model="loginForm.name"
                      autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input style="width: 200px" type="password" v-model="loginForm.password"
                      show-password autocomplete="off" size="small"></el-input>
          </el-form-item>
          <el-form-item>
            <div align="left">
              <el-button type="primary" @click="confirm()" style="width: 80%">确 定</el-button>
            </div>

          </el-form-item>
        </el-form>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "login",
  data(){

    return{
      loginForm:{
        name:'',
        password:''
      },
      rules:{
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 6, message: '用户名长度在 3 到 6 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输密码', trigger: 'blur' },
          { min: 6, max: 12, message: '密码长度在 6 到 12 个字符', trigger: 'blur' }
        ]
      }

    }
  },
  methods:{
    confirm(){
      this.$refs.loginForm.validate((valid) => {
        if (valid) { //valid成功为true，失败为false
          this.$router.replace('/index');
          this.$message({
            showClose: true,
            message: '登录成功',
            type: 'success'
          });
        } else {
          console.log('校验失败');
          return false;
        }
      });

    },


  }
}
</script>

<style scoped >
@import "../assets/css/fonts/fonts.css";


.loginDiv {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -250px;
  width: 450px;
  height: 330px;
  background: rgb(255,255,255,0.6);

  box-shadow: 0 0 20px #80a0d0;
  border-radius: 5%;

}
.login-title {
  font-family: Alimama ,sans-serif !important;
  font-size: xx-large;
  height: auto;
  margin: 20px 0;
  text-align: center;

}
.login-content {
  width: 400px;
  height: 250px;
  position: absolute;
  top: 25px;
  left: 25px;

  background: rgb(255,255,255,0);
}
.el-form-item{
  background: rgb(255,255,255,0);
  height: auto;
}
</style>
